<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素偏移量offset系列</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #root {
      width: 200px;
      height: 200px;
      background-color: palevioletred;
      margin: 10px auto;
      /* position: relative; */
    }

    .father {
      width: 144px;
      height: 100px;
      background-color: green;
      margin-left: 10px;
    }

    .son {
      width: 53%;
      height: 51%;
      background-color: gold;
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="father">
      <div class="son"></div>
    </div>
  </div>
</body>
<script>
  /*
  offset翻译为偏移量
    使用相关属性可以动态获得该元素的位置(偏移) 大小 没有定位 则以body为父元素
      获取元素距离带定位父元素的位置
      获取元素自身大小(宽高)
      注意返回的数值都是不带单位的
        属性 
          offsetTop 返回元素距离带有定位的父元素上方的偏移
          offsetParent 返回该元素带有定位的父元素 如果父元素都没有定位则返回body
          offsetLeft返回元素距离带父元素左方的偏移
          offsetWidth 返回自身包括 padding border 内容区的宽度  不带单位
          offsetHeight 返回自身包括 padding border 内容区的高度 不带单位
  */
  let root = document.querySelector('#root')
  console.log(root.offsetTop)
  //  .son对应带定位的父级元素的是#root
  console.log(document.querySelector('.son').offsetLeft)
  console.log(document.querySelector('.son').offsetWidth)
 /*
  offset和style的区别
    offset
      可以获取任意样式表的样式值
      没有单位
      offsetWidth包括padding+border+width
      属性是只读
      想要获取元素大小和位置 用offset合适
    
    style 
      只能获取行内样式表的样式值
      带单位
      width不包括padding border
      属性可读写
      更改元素值用合适
  
  */
</script>

</html>